<template>
  <div class="courseLatelyDelete">
    <div v-if="!designDeleteCourses.length" style="margin-top: 20px">
      暂无最近删除课程！
    </div>
    <div class="coursesList">
      <!-- <div v-for="(item, index) in designDeleteCourses" :key="index"> -->
      <!-- <h2>{{ item.cName }}</h2> -->
      <div
        class="item-list"
        :class="{
          zCourses: designDeleteCourses.length % 4 == 0 || !designDeleteCourses.length,
          courses2: designDeleteCourses.length % 4 == 2,
          courses3: designDeleteCourses.length % 4 == 3,
        }"
      >
        <div
          v-for="(citem, cindex) in designDeleteCourses"
          :key="cindex"
          class="coursesContent hover_boxShadow_defaut"
          :title="citem.name"
        >
          <!-- @click="handelOpenCourse(citem)" -->
          <div class="coursesImg">
            <!-- <img :src="citem.cIconPath" /> -->
            <img
              v-lazy="citem.iconPath"
              :title="citem.name"
              @click="handelJumpCourseDetail(citem)"
            />
          </div>
          <div class="courseInfo">
            <div
              class="name"
              :title="citem.name"
              @click="handelJumpCourseDetail(citem)"
            >
              {{ citem.name || "【缺课程名称】" | filterName }}
            </div>
            <div class="courseDesc">
              设计：{{ filterUserName(citem.mainDesignerUserID) }}
            </div>
            <div class="desc">简介：{{ citem.description || "无" }}</div>
            <div class="time">
              删除时间：{{
                citem.lastUpdatedTime || "【删除时间】" | filterTime
              }}
            </div>
          </div>
          <div class="btnBox">
            <div class="cancelSubmitBtn" @click.stop="handlerBack(citem)">
              撤销撤消
            </div>
            <div class="publishBtn" @click.stop="handleDelete(citem)">
              彻底删除
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDesigncourselist,
  updateDesignCourseState,
  deleteCourse,
} from "@/request/designcourse";
import { mapState } from "vuex";
import { location, renderTimeToYMD, currTime } from "@/util/tool";
import { Session } from "@/util/storage/session"

export default {
  data() {
    return {
      src: [],
      location: location(window),
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userList: (state) => state.user.userList,
      designDeleteCourses: (state) => state.courses.designDeleteCourses
    }),
    filterUserName: () => {
      return function (val) {
        const findUser = this.userList.find((item) => item.userID === val);
        return !findUser
          ? val
          : findUser.realName ||
              findUser.nickName ||
              findUser.email ||
              findUser.regName;
      };
    },
  },
  filters: {
    filterName(value) {
      return value.substring(
        0,
        value.lastIndexOf("_") == -1 ? value.length : value.lastIndexOf("_")
      );
    },
    filterTime(val) {
      const time = new Date(val);
      return renderTimeToYMD(time) + ' ' + currTime(time)
    },
  },
  created() {
    if (!this.userList.length) this.$store.dispatch("user/getUserList");
  },
  methods: {
    // 跳转到课程详情
    handelJumpCourseDetail(item) {
      this.$router.push({
        name: "Creativeourse",
        query: { courseID: item.courseID },
        params: { id: item.courseID },
      });
    },
    handlerBack(item) {
      this.$confirm(
        "确认撤销删除",
        {
          title: "提示",
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
          callback: (action) => {
            if (action == 'confirm') this.handleBackState(item);
          },
        }
      );
    },
    handleDelete(item) {
      this.$confirm(
        "确认彻底删除，删除后无法恢复!",
        {
          title: "提示",
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
          callback: (action) => {
            if (action == 'confirm') this.handlerDeleteState(item);
          },
        }
      );
    },
    handleBackState(item) {
      const params = {
        courseID: Number(item.courseID),
        userID: this.userInfo.userID,
        state: "创作中",
      };
      updateDesignCourseState(params).then((res) => {
        if (res.errno === 0) {
          this.$store.dispatch('courses/fetchDesignDeteleCoursesList');
          this.$antdMessage.success({
            content: "操作成功！",
          });
          Session.remove('/d_api/designcourse/designcourselist?state=已删除')
          Session.remove('/d_api/designcourse/designcourselist')
          this.$store.dispatch('courses/fetchDesignDeteleCoursesList')
          this.$store.dispatch("courses/fetchDesignCourses")
        } else {
          this.$antdMessage.error({
            content: res.message || "操作失败！",
          });
        }
        this.show = false;
      });
    },
    handlerDeleteState(item) {
      let params = {
        courseID: Number(item.courseID),
        userID: this.userInfo.userID,
        isRealDel: true,
      };
      deleteCourse(params).then((res) => {
        this.show = false;
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "删除成功！",
          });
          Session.remove('/d_api/designcourse/designcourselist?state=已删除')
          Session.remove('/d_api/designcourse/designcourselist')
          this.$store.dispatch('courses/fetchDesignDeteleCoursesList')
          this.$store.dispatch("courses/fetchDesignCourses")
        } else {
          this.$antdMessage.error({
            content: res.message || res,
          });
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="stylus">
$boderColor = solid 1px #b7b2b2;

.courseLatelyDelete {
  // padding-top: 20px;
  margin: 0 auto;
  max-width: 1200px;

  .coursesList {
    .item-list {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

      .coursesContent {
        cursor: pointer;
        padding-top: 11px;
        margin-right: 20px;
        margin-top: 25px;
        position: relative;
        cursor: pointer;
        width: 273px;
        height: 340px;
        background-color: #ffffff;
        // box-shadow: 0px 8px 16px 0px rgba(79, 111, 139, 0.16);
        // border: $boderColor;
        border-radius: 5px;
        overflow: hidden;
        transition: all 0.2s linear;

        .coursesImg {
          margin: 0 14px 0 15px;
          position: relative;
          line-height: 0;

          img {
            object-fit: cover;
            width: 100%;
            height: 150px;
          }
        }

        // .coursesImg:hover::before {
        // position: absolute;
        // top: 0;
        // left: 0;
        // text-align: center;
        // line-height: 150px;
        // content: '发布课程';
        // color: rgba(255, 255, 255, 0.6);
        // font-size: 30px;
        // width: 100%;
        // height: 100%;
        // }
        .courseInfo {
          margin: 0 14px 0 15px;

          .name {
            margin-top: 15px;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .pushTime {
            margin-top: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 12px;
            color: #999999;
          }

          .desc {
            margin-top: 9px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }

        .cousesName {
          padding: 0 10px;
          z-index: 1;
          // position: absolute;
          bottom: 0;
          width: 100%;
          background: rgba(255, 255, 255, 0.2);
          transition: bottom 0.2s linear;
        }

        .cousesTarget {
          padding: 0 10px;
          z-index: 1;
          position: absolute;
          bottom: -21px;
          width: 100%;
          background: rgba(255, 255, 255, 0.2);
          transition: bottom 0.2s linear;
        }

        .btnBox {
          display: flex;
          height: 38px;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;

          .cancelSubmitBtn, .publishBtn {
            flex: 1;
            height: 38px;
            text-align: center;
            line-height: 38px;
            border-top: 1px solid rgba(79 111 139, 16%);
            transition: all 0.2s linear;
          }

          .cancelSubmitBtn {
            border-bottom-left-radius: 5px;
          }

          .publishBtn {
            border-bottom-right-radius: 5px;
          }

          .cancelSubmitBtn:hover {
            background: #f1ae3d;
            color: #fff;
            border-color: #f1ae3d;
          }

          .publishBtn:hover {
            background: #f1ae3d;
            color: #fff;
            border-color: #f1ae3d;
          }
        }
      }

      .coursesContent:hover {
        // box-shadow: 0px 8px 16px 0px rgba(79, 111, 139, 0.16);
        .cousesName {
          bottom: 1px;
        }

        .cousesTarget {
          bottom: 0px;
        }
      }
    }

    .zCourses::after {
      content: none;
    }

    .courses2::after {
      position: relative;
      content: '';
      width: calc((100% - (273px * 4)) / 3 + (273px * 2));
      height: 317px;
    }

    .courses3::after {
      position: relative;
      content: '';
      width: calc(100% - (100% - 273px));
      height: 317px;
    }
  }

  .confirmPublishDialog {
    box-shadow: none;

    .header {
      text-align: center;
      font-family: PMingLiU-ExtB;
      font-weight: bold;
      font-size: 20px;
      color: #333;
    }

    .el-icon-close {
      opacity: 0;
      font-size: 22px;
      color: #f1ae3d;
      transition: all 0.2s linear;
    }

    .el-dialog__body {
      padding: 10px 0;
      text-align: center;
    }
  }

  .confirmPublishDialog:hover {
    .el-icon-close {
      opacity: 1;
    }
  }
}
</style>